<template>
  <view class="tn-padding-sm">
    <juanneiPdf style="position: absolute;top: -999999px"  ref="PDF" :jsonData="jsonData" @upload="pdfUpload"></juanneiPdf>
    <view v-for="(item, index) in arr" :key="index">
      <uni-card class="card" :isFull="true">
        <view class="uni-body" style="position: relative;">
          <view class="content" @click="editView(item)">
            <view>
              <text class="label">
                题名：
                <text class="value">{{ item.title }}</text>
              </text>
            </view>
            <view>
              <text class="label">
                制作者：
                <text class="value">{{ item.author }}</text>
              </text>
            </view>
            <view>
              <text class="label">
                制作日期：
                <text class="value">{{ item.makeTimel ||item.makeTime }}</text>
              </text>
            </view>
            <view>
              <text class="label">
                页码：
                <text class="value">{{ item.pageNo }}</text>
              </text>
            </view>
            <view>
              <text class="label">
                备注：
                <text class="value">{{ item.remark }}</text>
              </text>
            </view>
          </view>

          <tn-button  v-if="$route.query.isClosed === '0'" style="position: absolute;right: 0;bottom: 0;" @click="deleteItem(index)"
                     backgroundColor="tn-bg-red"
                     fontColor="tn-color-white">删除
          </tn-button>
        </view>
      </uni-card>
    </view>
    <tn-empty mode="list" v-if="isEmpty"></tn-empty>
    <view v-if="$route.query.isClosed === '0'" class="add-btn tn-main-gradient-blue tn-shadow-gray" @click="saveType = 'add';show = true">
      <view class="tn-icon-add tn-text-xxl"/>
    </view>
    <tn-popup v-model="show" mode="bottom" length="60%" @close="clearForm">
      <view class="card tn-padding-sm tn-margin-sm">
        <inputForm v-model="form" ref="form" :list="list"/>
        <view class="tn-flex tn-flex-row-center tn-padding-xl tn-margin-top-lg">
          <tn-button @click="submit" backgroundColor="tn-bg-blue" style="width: 80%" fontColor="tn-color-white">保存
          </tn-button>
        </view>
      </view>
    </tn-popup>

    <tn-modal v-model="erweima" :custom="true">
      <view class="custom-modal-content tn-flex tn-flex-direction-column tn-flex-col-center">
        <p style="margin-bottom: 8px;">卷内目录</p>
        <canvas id="qrcode" canvas-id="qrcode" style="width: 200px; height: 200px;"></canvas>
        <tn-button @click="downloadPDFFn('卷内目录')" backgroundColor="tn-bg-blue" style="width: 80%;margin-top: 16px;" fontColor="tn-color-white">
          下载
        </tn-button>
      </view>
    </tn-modal>
  </view>
</template>

<script>
import inputForm from '@/components/inputForm.vue'
import {calc} from "a-calc/es";
import {delVideo, getCatlogList, listStuff, saveCatlog, selectDicByCode,} from "../../../api/lupeiwenshu";
import pdfMixins from "../js/mixins";
import juanneiPdf from "@/pages/roadCompensation/juannei/juanneiPdf.vue";
import dayjs from "dayjs";

export default {
  components: {
    juanneiPdf,
    inputForm
  },
  mixins: [pdfMixins],
  data() {
    return {
      isEmpty: false,
      button: [
        {
          text: '取消',
          backgroundColor: '#E6E6E6',
          fontColor: '#FFFFFF',
          plain: true,
          shape: 'round'
        },
        {
          text: '确定',
          backgroundColor: 'tn-bg-red',
          fontColor: '#FFFFFF'
        }
      ],
      saveType: 'add',
      show: false,
      form: {},
      arr: [],
      list: [
        {
          label: '题名：',
          prop: 'title',
          type: 'select',
          props: {
            label: 'name',
            value: 'name'
          },
          dicData: [],
        }, {
          label: '制作者：',
          prop: 'author',
        }, {
          label: '制作日期：',
          prop: 'makeTime',
          type: 'date',
          labelWidth: 200,
        }, {
          label: '页码：',
          prop: 'pageNo',
        }, {
          label: '备注：',
          prop: 'remark',
        }]
    }
  },
  watch: {},
  mounted() {
    this.initSelectJson()
    this.getList(this.$route.query.id)
  },
  methods: {
    async initSelectJson() {
      this.list.find(item => item.label === '题名：').dicData = (await selectDicByCode('wsml')).data;
    },
    getList(id) {
      getCatlogList({docId: id}).then(res => {
        this.jsonData = this.arr = res.data.map(item => {
          item.makeTime = item.makeTime?dayjs(item.makeTime).format('YYYY-MM-DD'):''
          return item
        })
        this.isEmpty = !res.data.length
      })
    },
    deleteItem(index) {
      uni.showModal({
        content: "是否要删除",
        success: (res) => {
          if (res.confirm) {
            this.saveType = 'delete'
            this.arr.splice(index, 1)
            this.submit()
          }
        }
      })
    },
    submit() {
      const data = {
        ...this.form,
        docId: this.$route.query.id,
        orderNo: this.arr.length + 1
      }
      if (this.saveType === 'add') {
        this.arr = [...this.arr, {...data}]
      }
      saveCatlog({
        docId: this.$route.query.id,
        catList: this.arr
      }).then(res => {
        this.show = false
        this.getList(this.$route.query.id)
      })

    },
    editView(item) {
      if(this.$route.query.isClosed === '1')return
      this.saveType = 'edit'
      this.show = true
      this.form = item
    },
    modalClick({index}) {
      if (index === 1) {

      }
    },
    clearForm() {
      this.form = {}
    }
  }
}
</script>
<style scoped lang="scss">
.card {
  margin: 0 !important;
  border-radius: 6px;
  margin-top: 15px !important;

  .right-top {
    position: absolute;
    right: 0;
    top: 0;
    border-radius: 6rpx;
    color: white;
    padding: 0 15rpx;
  }

  ::v-deep {
    .uni-card__header {
      .uni-card__header-box {
        .uni-card__header-content-title {
          font-size: 32rpx;
          font-weight: bold;
        }
      }
    }

    .content > view {
      padding: 2px;
      line-height: 2em;
    }

    .value {
      color: $tn-color-gray;
    }
  }
}

.add-btn {
  position: fixed;
  right: 40rpx;
  bottom: 100rpx;
  border-radius: 50%;
  padding: 30rpx;
}

::v-deep {
  .tn-btn--plain {
    background-color: #e6e6e6 !important;
  }
}

</style>
